{% extends 'layui/edit.html' %}
{% load i18n static common %}
{% block edit_form %}
  <form class="layui-form data-form" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div>
      {% with adminform.form as f %}
         <div class="layui-form-item {% if not request.user.is_superuser or f.base_fields.company.queryset.count == 1 %} layui-hide {% endif %}">
          {% layui_inline f.company %}
        </div>
        <div class="layui-form-item">
          {% layui_inline f.category_code %}
          {% layui_inline f.category_name %}
        </div>
        <div class="layui-hide">{{ f.seniority }}</div>

      {% endwith %}
    </div>
    <div class="layui-form-item work-flow" style="width: 750px">
      <table id="id_vt_seniority" class="layui-hide" lay-filter="vt_seniority"></table>
      <script type="text/html" id="vt_seniority_toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
      </script>
    </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" style="color:#E84C3D;background-color:transparent">
        <i class="fa fa-fw fa-trash-o"></i>
      </a>
    </script>
    <script>
      layui.use(['table', 'form', 'element', 'layer'], function () {
        console.log(11)
        var table = layui.table, layer = layui.layer, form = layui.form;
        var nodes = $("#id_seniority").val();
        var data = null;
        if (nodes != "") {
          data = JSON.parse(nodes);
        } else {
          data = [];
        }
        var node_table = table.render({
          id: "id_vt_seniority"
          , elem: "#id_vt_seniority"
          , toolbar: "#vt_seniority_toolbar"
          , defaultToolbar: []
          , canSelectRow: 'false'
          //LAY_CHECKED: true,
          , autowidth: 'true'
          , height: '220'
          , even: true
          , cols: [
            [
              {
                field: 'seniority',
                title: "{% trans 'vacationTimeSeniority_field_seniority' %}",
                edit: 'text',
                sort: true,
                width: 200
              },
              {field: 'days', title: "{% trans 'vacationTimeSeniority_field_days' %}", edit: 'text', width: 200},
              {field: 'operation', title: "", toolbar: '#barDemo'}
            ]
          ]
          , url: ""
          , data: data
          , text: {
            none: gettext("none_data")
          }
          , loading: true
          , page: false
        });
        table.on('edit(vt_seniority)', function (obj) {
          var value = obj.value
            , data = obj.data
            , field = obj.field;
          $("#id_seniority").val(JSON.stringify(table.cache['id_vt_seniority']));
        });
        table.on('toolbar(vt_seniority)', function (obj) {
          var oldData = table.cache["id_vt_seniority"];
          var table_cache = new Array();
          for (var i = 0; i < oldData.length; i++) {
            if (oldData[i].length != 0) {
              table_cache.push(table.cache['id_vt_seniority'][i]);
            }
          }
          data = {"seniority": (table_cache.length + 1).toString(), "days": '', "operation": ''};
          table_cache.push(data);
          node_table.reload({data: table_cache});
        });
        table.on('tool(vt_seniority)', function (obj) {
          var data = obj.data;
          switch (obj.event) {
            case 'set_approver':
              break;
            case 'set_notifier':
              if (data.approver_type == 0) {
                layer.alert('{% trans 'notifier_type_no_selected' %}');
              } else {
                console.log(data.notifier_type);
              }
              obj.update({notifier: 2222222});
              break;
            case 'del':
              layer.confirm('{% trans 'are_you_sure_to_delete_the_selected_node' %}', {title:'Prompt', btn: [gettext('btn_confirm'), gettext('btn_cancel')]}, function (index) {
                obj.del();
                var table_cache = new Array();
                for (var i = 0; i < table.cache['id_vt_seniority'].length; i++) {
                  if (table.cache['id_vt_seniority'][i].length != 0) {
                    table_cache.push(table.cache['id_vt_seniority'][i]);
                  }
                }
                $("#id_seniority").val(JSON.stringify(table_cache));
                layer.close(index);
              });
              break;
            default:
              break;
          }
        });
        form.on('select(approver_type)', function (data) {
          var elem = $(data.elem);
          var trElem = elem.parents('tr');
          var tableData = table.cache['id_vt_seniority'];
          tableData[trElem.data('index')][elem.attr('name')] = data.value;
          $.ajax({
            url: "{% url 'biotime:node_receiver' %}?receiver=" + data.value,
            type: "GET",
            dataType: "html",
            success: function (callback) {
              $("td[data-field=approver] .layui-table-cell").html(callback);

            }
          });
        });
        form.on('select(notifier_type)', function (data) {
          var elem = $(data.elem);
          var trElem = elem.parents('tr');
          var tableData = table.cache['id_vt_seniority'];
          tableData[trElem.data('index')][elem.attr('name')] = data.value;
        });

      });
    </script>
  </form>

{% endblock %}